<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<head>
<!-- <script src="../../../resources/js/join.js"></script> -->
<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
<script type="text/javascript">

$(function(){
	alert('무명함수 시작');
	// 아이디 검사 및 중복체크
	$("#idcheck_btn").mouseover(function()
		{ // 마우스 오버 시
			alert('아이디 체크 버튼 클릭');
			$("#idcheck").hide();// idcheck 영역을 숨김
			// 1. 입력 아이디 길이 체크
			if($.trim($("#user_id").val()).length < 4){
	  			var warningTxt="<font color='red'>아이디는 4자 이상이어야 합니다.</font>";
	  			$("#idcheck").text("");// idcheck 영역 초기화
	  			$("#idcheck").show();// idcheck 영역 보임
	  			$("#idcheck").append(warningTxt);// idcheck 영역에 경고메시지 추가
	  			$("#id").val("").focus();// id 텍스트 상자에 커서 이동
	  			return false;
	  		};
	  		if($.trim($("#user_id").val()).length > 15){
	  			var warningTxt="<font color='red'>아이디는 15자 이하이어야 합니다.</font>";
	  			$("#idcheck").text("");
	  			$("#idcheck").show();
	  			$("#idcheck").append(warningTxt);
	  			$("#id").val("").focus();
	  			return false;
	  		};	  		
		  	 var userId=$("#user_id").val(); // 아이디 저장
		  	  // 2. 아이디 유효성 검사(첫자가 영문소문자 시작)
		  	 if(!(validate_userid(userId))){
		  		var warningTxt="<font color='red'>영문 소문자 시작과 숫자 및 _조합만 가능.</font>";
				$("#idcheck").text("");
				$("#idcheck").show();
				$("#idcheck").append(warningTxt);
				$("#id").val("").focus();
				return false; 
			  }
		return false; // 다음 태그 수행 금지
	});

	// 아이디 유효성 검사 함수
	function validate_userid(userId){
		alert('아이디 유효성 검사');
		var pattern = new RegExp(/^[a-z][a-z0-9_]+$/);
	 return pattern.test(userId);
	}
}); 

function passchk() {
	//var pass = document.form.pass.value;
	var pwd = $("#pwd").val();
	//var pass2 = document.form.pass2.value;
	var pwd2 = $("#pwd_chk").val();
	if (pwd2.length == 0 || pwd2 == null) {
		// document.form.chk.value = "비밀번호를 입력하세요";
		$("#chk").val("비밀번호를 입력하세요");
	} else if (pwd != pwd2) {
		//document.form.chk.value = "비밀번호가 다릅니다.";
		$("#chk").val("비밀번호가 다릅니다.");
	} else {
		//document.form.chk.value = "비밀번호가 동일합니다.";
		$("#chk").val("비밀번호가 동일합니다.");
	}
	return;
}


function sample4_execDaumPostcode(id_val) {
    new daum.Postcode({
        oncomplete: function(data) {
            // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
        	alert('주소 검색');
            // 각 주소의 노출 규칙에 따라 주소를 조합한다.
            // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
            var fullAddr = ''; // 최종 주소 변수
            var extraAddr = ''; // 조합형 주소 변수

            // 사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
            if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
                fullAddr = data.roadAddress;

            } else { // 사용자가 지번 주소를 선택했을 경우(J)
                fullAddr = data.jibunAddress;
            }

            // 사용자가 선택한 주소가 도로명 타입일때 조합한다.
            if(data.userSelectedType === 'R'){
                //법정동명이 있을 경우 추가한다.
                if(data.bname !== ''){
                    extraAddr += data.bname;
                }
                // 건물명이 있을 경우 추가한다.
                if(data.buildingName !== ''){
                    extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
                }
                // 조합형주소의 유무에 따라 양쪽에 괄호를 추가하여 최종 주소를 만든다.
                fullAddr += (extraAddr !== '' ? ' ('+ extraAddr +')' : '');
            }

            // 우편번호와 주소 정보를 해당 필드에 넣는다.
            //document.getElementById("sample6_postcode1").value = data.postcode1;
            //document.getElementById("sample6_postcode2").value = data.postcode2;
            document.getElementById(id_val).value = fullAddr;

            // 커서를 상세주소 필드로 이동한다.
            document.getElementById("addr_detail01").focus();
        }
    }).open();
}
	
	
	
	
	// 아이디와 취소체크
function check() {
	if ($.trim($("#user_id").val()) == "") {
		alert("아이디를 입력하세요!");
		$("#user_id").val("").focus();
		return false;
	}

	if ($.trim($("#pwd").val()) == "") {
		alert("비밀번호를 입력하세요!");
		$("#pwd").val("").focus();
		return false;
	}
	if ($.trim($("#pwd_chk").val()) == "") {
		alert("비밀번호를 재확인하세요!");
		$("#pwd_chk").val("").focus();
		return false;
	}

	if ($.trim($("#name").val()) == "") {
		alert("이름을 입력하세요!");
		$("#name").val("").focus();
		return false;
	}

	if ($.trim($("#phone").val()) == "") {
		alert("번호를 입력세요!!!");
		$("#phone").val("").focus();
		return false;
	}


	if ($.trim($("#addr01").val()) == "") {
		alert("주소를 입력하세요");
		$("##addr01").val("").focus();
		return false;
	}

	if ($.trim($("#addr_detail01").val()) == "") {
		alert("나머지 주소를 입력하세요!");
		$("#addr_detail01").val("").focus();
		return false;
	}
	/* if($.trim($("#add3").val())==""){
		alert("나머지 주소를 입력하세요!");
		$("#add3").val("").focus();
		return false;
	}  */
	/* if($.trim($("#pwd01").val())==""){
		alert("질문을 선택하세요!");
		$("#pwd01").val("").focus();
		return false;
	}  */
	if ($.trim($("#acc_answer").val()) == "") {
		alert("암호 답을 입력하세요!");
		$("#acc_answer").val("").focus();
		return false;
	}

}

</script>
</head>

<%@ include file="../../../resources/include/header.jsp"%>

<form action="join_ok.do" method="post" name="form"
	onsubmit="return check()">
	<table border="1" align="center">
		<tr>
			<td colspan="3" align="center"><h2>회원가입</h2></td>
		</tr>
		<tr>
			<td>*아이디 :</td>
			<td><input name="user_id" id="user_id" /> 
			<input type="button" value="아이디중복체크" id="idcheck_btn" /> <br> 
			<!-- 경고문이 출력되는 위치  -->
			<span id="idcheck"> </span> 
			<a href="selectOne.do">중복확인</a>
			</td>
		</tr>
		<tr>
			<td>*비밀 번호 :</td>
			<td><input type="password" name="pwd" id="pwd" /></td>
		</tr>

		<tr>
			<td>*비밀 번호 확인 :</td>
			<td>
			<input type="password" size="15" maxlength="20" name="pwd_chk" id="pwd_chk" onblur="passchk()">&nbsp; 
			<input type="text" style="border-width: 0px" size="20" name="chk" id="chk"
					value="비밀번호를 입력하세요" readonly="readonly">
			</td>
		</tr>

		<tr>
			<td>*회사명(이름) :</td>
			<td><input name="name" id="name" /></td>
		</tr>

		<tr>
			<td>*휴대폰(전화) :</td>
			<td><input name="phone" id="phone" size="11" /></td>
			</tr>

		<tr>
		<tr>
			<td>*주소 :</td>
			<td><input type="button" onclick="sample4_execDaumPostcode('addr01')" value="주소찾기"> <br>
				<input type="hidden" id="roadAddress01" placeholder="도로명주소">
				<input type="text" size="60" id="addr01" name="addr01" placeholder="지번주소">
				<span id="guide" style="color: #999"></span> 
				<input name="addr_detail01" id="addr_detail01" /></td>
		</tr>

		<tr>
			<td>질문을 입력하세요.</td>
			<td><select name="acc_question" id="acc_question" onchange="select()">
					<option value="">*** 질문을 입력하세요.****</option>
					<option value="질문1">질문1</option>
					<option value="질문2">질문2</option>
					<option value="질문3">질문3</option>
			</select></td>
		</tr>
		<tr>
			<td>*비번 암호 답 :</td>
			<td><input name="acc_answer" id="acc_answer" /></td>
		</tr>

		<hr>
		<hr>
		<tr>
			<td colspan="2" align="center"><h3>추가입력사항</h3></td>
		</tr>
		<hr>
		
		<tr>
			<td>담당자 :</td>
			<td><input name="name2" id="name2" /></td>
		</tr>
		<tr>
			<td>휴대폰(전화) :</td>
			<td><input name="phone2" id="phone2" size="11" /></td>			
		</tr>
		<tr>
			<td>@주소추가 2개까지 가능</td>
		</tr>

		<tr>
			<td>*주소 :</td>
			<td><input type="button"
				onclick="sample4_execDaumPostcode('addr02')" value="주소찾기"> <br>
				<input type="hidden" id="roadAddress02" placeholder="도로명주소">
				<input type="text" size="60" id="addr02" name="addr02" placeholder="지번주소">
				<span id="guide" style="color: #999"></span> <input
				name="addr_detail02" id="addr_detail02" /></td>
		</tr>

		<tr>
			<td>*주소 :</td>
			<td><input type="button"
				onclick="sample4_execDaumPostcode('addr03')" value="주소찾기"> <br>
				<input type="hidden" id="roadAddress03" placeholder="도로명주소">
				<input type="text" size="60" id="addr03" name="addr03" placeholder="지번주소">
				<span id="guide" style="color: #999"></span> <input
				name="addr_detail03" id="addr_detail03" /></td>
		</tr>

		<tr>
			<td colspan="3" align="center">
			<input type="submit" value="가입" class="input_b" /> 
			<input type="reset" value="취소" class="input_b" /></td>
		</tr>
	</table>
</form>
<%@ include file="../../../resources/include/footer.jsp"%>

